<template>
	<view class="contaienr">
		<view class="top_box">
			<view class="top_bon">
				<view class="small">可提现金额(元)</view>
				<view class="big"><text>￥</text>{{allMoney}}</view>
			</view>
		</view>
		<view class="kuang_box">
			<view class="title">提现金额</view>
			<view class="input_box">
				<view class="left">￥</view>
				<input class="input" type="text" v-model="money">
				<view class="right" @click="money = allMoney">全部提现</view>
			</view>
		</view>

		<view class="sebtns" @click="apply">申请提现</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: '0.00',
				allMoney: '0.00',
				qiInfo: 0,
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				this.$allApi.getQiInfo().then(res => {
					this.allMoney = res.data.brokerage_price
					this.qiInfo = res.data
				})
			},
			apply() {
				if (this.money == '' || Number(this.money) == 0) return this.$u.toast('提现金额输入有误')
				else if (Number(this.money) > Number(this.allMoney)) return this.$u.toast('可提现佣金不足')
				this.$allApi.cashMoney({
					money: this.money,
					name: this.qiInfo.nickname,
					extract_type: 'weixin'
				}).then(res => {
					this.$u.toast('申请成功')
					this.getData()
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.sebtns {
		margin-top: 50px;
		width: 100vw;
		background: #EA3D37;
		color: #fff;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 35rpx;
		height: 70rpx;

		bottom: calc(20rpx + constant(safe-area-inset-bottom));
		bottom: calc(20rpx + env(safe-area-inset-bottom));
	}

	.kuang_box {
		background: #fff;
		width: 710rpx;
		margin-left: 20rpx;
		margin-top: -80rpx;
		position: relative;
		padding: 20rpx;
		border-radius: 20rpx;

		.input_box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input {
				flex: 1;
				font-size: 84rpx;
				border-bottom: 1px solid #eee;
				height: 110rpx;
				padding: 20rpx;
			}

			.left {
				font-size: 68rpx;
			}

			.right {
				color: #EA3D37;
				font-size: 28rpx;
			}
		}

		.title {
			font-size: 24rpx;
		}
	}

	.top_box {
		height: 236rpx;
		position: relative;
		padding: 20rpx;

		.top_bon {
			position: relative;
			color: #fff;

			.small {
				font-size: 24rpx;
			}

			.big {
				font-size: 60rpx;

				text {
					font-size: 30rpx;
				}
			}
		}
	}

	.top_box:before {
		content: '';
		position: absolute;
		top: 0;
		left: -50%;
		width: 200%;
		height: 100%;
		z-index: -1;
		background: #EA3D37;

		;
		/* 背景颜色 */
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}
</style>